<template>
  <div class="p-card">
    <i class="el-icon-close" @click="remove"></i>
    <div style="margin:20px 10px;">
      <div class="p-card" v-for="(item, index) in data.phrases" :key="index" v-if="item.id">
        <i class="el-icon-close" @click="del(index)" ></i>
        <p>{{item.name}}</p>
      </div>
      <i class="el-icon-plus" @click="add" style="font-size: 18px;position: relative; top: 10px;"></i>
    </div>
    <div style="margin: 20px 10px;">
      <el-select v-model="data.type" placeholder="请选择" style="width: 140px;" @change="changeType">
        <el-option label="单个" :value="1">
        </el-option>
        <el-option label="随机" :value="2">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: null,
    selectItem: null,
    index: 0
  },
  created() {},
  computed: {
    name() {
      return this.data && this.data.name ? this.data.name : "";
    }
  },
  data() {
    return {};
  },
  methods: {
    remove() {
      this.$emit("remove", this.data, this.index);
    },
    del(subIndex) {
      this.$emit("delSubPhrase", this.index, subIndex);
    },
    add() {
      this.$emit("addSubPhrase", this.index);
    },
    changeType() {
      this.$emit('changeSubPhraseType', this.index, this.data.type);
    }
  }
};
</script>
